/*
Template Name: Rokono HTML Template
Description: A Business/Portfolio HTML Template
Author: Chris Creed
URL: http://www.chris-creed.com
*/	

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { 
    width: 960px; 
    margin: 0 auto;  
}

body { 
    font-family: arial, sans-serif; 
    background-color: #fff; 
    color: #555; 
    line-height: 24px; 
    font-size: 14px; 
    background: url(../images/main-bg.jpg) repeat-x; 
}

h1 { 
    font-size: 38px; 
    margin: 0 0 30px 0; 
}

h2 { 
    font-size: 28px; 
    margin: 40px 0 20px 0; 
}

h3 { 
    font-size: 20px; 
    margin: 30px 0 10px 0; 
    font-style: italic; 
}

h4 { 
    font-size: 18px; 
    margin: 30px 0 15px 0;
}

h5 { 
    font-size: 18px; 
    margin: 30px 0 5px 0;
}

p { 
    margin: 0 0 10px 0; 
}

a { 
    text-decoration: none; 
    color: #2684cd; 
}

a:hover { 
    color: #555; 
    cursor: pointer; 
}

em { 
    font-style: italic; 
}

.hide { 
    display: none; 
}

.title { 
    margin-top: 0; 
}

.article-line { 
    clear: both; 
    border-bottom: 1px #ddd dotted; 
    margin: 40px 0 45px 0; 
}

.cache-images { 
    display: none 
}

.more-details { 
    display: block; 
    margin: 5px 0 0 0; 
}

/* ------------ */
/* -- Header -- */
/* ------------ */
#header { 
    padding: 30px 0 0 0; 
    height: 70px; 
    border-bottom: 1px #ddd dotted; 
}

#header h1 { 
    float: left; 
    font-size: 35px; 
    margin: 32px 0 0 0; 
    letter-spacing: -2px; 
    font-weight: bold; 
}

#header h1 a { 
    color: #555; 
}

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { 
    float: right; 
    margin: 25px -22px 0 0;  
}

.menu {	
    padding: 7px 6px 0 0; }
.menu li { 
    margin: 0 0px; 
    padding: 0 0 8px;	
    float: left; 
    position: relative; 
}

.menu a { 
    display: block; 
    padding:  8px 15px; 
    margin: 0; 
    color: #555; 
    text-decoration: none; 
    font-size: 17px; 
}

.menu .current a, .menu li:hover > a { 
    color: #2684cd; 
}

.menu ul li:hover a, .menu li:hover li a { 
    color: #555; 
}

.menu ul a:hover { 
    background: #2684cd !important; 
    color: #fff !important; 
}

.menu ul { 
    background: #eee; 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: 250px; 
    position: absolute; 
    top: 35px; 
    left: 20px; 
    border: solid 1px #ddd; 
}

.menu li:hover > ul { 
    display: block; 
}

.menu ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
}

.menu ul a { 
    font-size: 16px; 
}

.menu ul ul { 
    left: 250px; 
    top: -3px; 
}

.menu li.current_page_item a { 
    color: #2684cd; 
}

.menu .sub-menu li.current_page_item a {
    color: #2684cd; 
}

/* ---------------------- */
/* -- Featured Section -- */
/* ---------------------- */
#featured-section { 
    float: left; 
    margin: 0 0 0 0; 
    overflow: hidden; 
    padding: 20px 0 50px 0; 
    border-bottom: 1px #ddd dotted; 
}

#featured-section h2 { 
    clear: both; 
    color: #888; 
    letter-spacing: -1px; 
    font-size: 30px; 
    padding: 30px 0 15px 0; 
    margin: 0; 
    text-align: center; 
}

#featured-section h2 span { 
    color: #555; 
}

#circles { 
    margin: 30px 0 0 0; 
}

#circles .circle { 
    float: left; 
    margin: 0 0 0 36px; 
    width: 183px; 
    height: 205px; 
    text-align: center; 
    color: #eee; 
    padding: 0 15px; 
}

.circle h3 { 
    margin-top: 45px; 
}

#featured-section .red-circle { 
    background: url(../images/circle-red.png) no-repeat; 
}

#featured-section .pink-circle { 
    background: url(../images/circle-pink.png) no-repeat; 
}

#featured-section .orange-circle { 
    background: url(../images/circle-orange.png) no-repeat; 
}

#featured-section .yellow-circle { 
    background: url(../images/circle-yellow.png) no-repeat; 
}

#featured-section .first { 
    margin-left: 0; 
}

/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#frontpage-main { float: left; margin: 50px 0 30px 0; background-color: #fff; width: 100%; }

#frontpage-main h3 { margin-top: 0; font-size: 18px; font-style: italic; }

#frontpage-main #overview { float: left; border-right: 1px #ddd dotted; width: 400px; padding-right: 80px; }

#frontpage-main #latest-article { float: right; width: 380px;  }

#latest-article .meta, #frontpage-section .meta a  { color: #aaa; font-size: 18px; }

#latest-article .article-title { font-size: 18px; }

#latest-article .read-more { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat; 
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0;  
    margin: 12px 0 0 -2px;
}

#latest-article .read-more:hover { 
    background: url(../images/red-button-bg.png) no-repeat; 
}

.blue-bullets { 
    float: left; 
    margin: 10px 0 0 0; 
}

.blue-bullets li { 
    background: url(../images/blue-bullet.png) no-repeat; 
    height: 21px; 
    position: relative; 
    padding: 0px 0 18px 35px; 
}

/* ------------- */
/* -- Content -- */
/* ------------- */
#main { 
    float: left; 
    margin: 40px 0 50px 0; 
    width: 100%; 
}
#content { 
    float: left; 
    width: 480px; 
    padding: 0 165px 0 0; 
}

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
#portfolio { 
    margin: 60px 0 50px 0;
}

#portfolio h2 { 
    letter-spacing: -1px; 
    margin: 0 0 40px 0; 
    font-size: 20px; 
    font-style: italic; 
    color: #888; 
}

.portfolio-item { 
    float: left; 
    width: 280px; 
    height: 200px; 
    margin: 0 0 60px 60px; 
}

.portfolio-item:hover { 
    opacity: 0.7; 
}

.first { 
    margin-left: 0; 
}

.portfolio-item img { 
    border: 1px #ddd solid; 
}

/* ------------- */
/* -- Project -- */
/* ------------- */
#project-content { 
    float: left; 
    width: 480px; 
}

#project-header { 
    margin: 0 0 25px 0; 
}

#project-content h3 { 
    margin: 0 0 10px 0;
}

#project-content h3 span { 
    color: #888; 
}

#project-image-large img { 
    float: right; 
    border: 1px #ddd solid; 
}

#project-content .read-more { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat; 
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0; 
}

#project-content .read-more:hover { 
    background: url(../images/red-button-bg.png) no-repeat; 
}

#project-header h3 { 
    margin-bottom: 2px; 
}

/* ----------- */
/* -- Posts -- */
/* ----------- */
.article-title { 
    margin: 0 0 -4px 0; 
}

.article-title a { 
    font-size: 24px; 
    color: #555; 
    font-style: normal; 
}

.article-title a:hover { 
    font-size: 24px; 
    color: #2684cd; 
}

.article-meta, .article-meta a { 
    margin: 5px 0 20px 0; 
    font-size: 18px; 
    color: #888; 
    font-style: normal; 
}

.more-link { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat; 
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0;
}

.more-link:hover { 
    background: url(../images/red-button-bg.png) no-repeat; 
    color: #fff; 
}

/* ------------- */
/* -- Sidebar -- */
/* ------------- */
#sidebar { 
    float: left; 
    width: 315px; 
    margin: 0; 
}

#sidebar h3 { 
    font-size: 16px; 
}

#sidebar .sidebar-title { 
    margin-top: 0; 
}

#sidebar .sidebar-button { 
    clear: both; 
    display: block; 
    background: url(../images/orange-button-bg.png) no-repeat; 
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 15px 0 0 -2px; 
}

#sidebar .sidebar-button:hover { 
    background: url(../images/black-button-bg.png) no-repeat; 
}

#sidebar .portfolio-item { 
    clear: both; 
    margin: 10px 0 10px 0; 
    width: 100px; 
}

#sidebar .portfolio-item img { 
    width: 250px; 
}

#sidebar .portfolio-item img:hover {
    opacity: 0.9;
}

/* ------------------ */
/* -- Contact Form -- */
/* ------------------ */
#contact-details { 
    float: left; 
    width: 300px; 
    padding: 0 120px 0 0; 
}

#contact-details .title { 
    margin-top: 0; 
}

#contact-details h4 { 
    margin: 0 0 5px 0; 
}

#contact-details span { 
    color: #888; 
}

#contact-form-container { 
    float: left; 
    width: 450px;  
}

#contact-form input { 
    background: url(../images/textinput-bg.png) repeat-x; 
    border: 1px #ddd solid; 
    padding: 15px; 
    width: 250px; 
    margin: 0 0 15px 0; 
    font-size: 12px; 
    color: #555; 
    font-family: arial, sans-serif; 
}

#contact-form textarea {
    background: url(../images/textarea-bg.png) repeat-x; 
    border: 1px #ddd solid; 
    padding: 15px; 
    width: 350px; 
    margin: 0 0 15px 0; 
    font-size: 12px; 
    color: #555; 
    line-height: 18px; 
    height: 150px; 
    font-family: arial, sans-serif; 
}

#contact-form .submit { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat; 
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    margin: 0 0 0 0; 
}

#contact-form .submit:hover { 
    background: url(../images/red-button-bg.png) no-repeat; 
    color: #fff; 
}

#response { 
    background-color: #eee; 
    border: 1px #ddd solid; 
    padding: 10px; 
    color: #cc0000; 
    margin-bottom: 17px; 
}


/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { 
    float: left; 
    border-top: 1px #ddd dotted; 
    margin: 20px 0 0 0;
    padding: 15px 0 20px 0; 
    width: 100%; 
}

.copyright {
    float: left;
}

.twitter { 
    float: right; 
}

/* ------------ */
/* -- Login -- */
/* ------------ */

#login-form-container { 
    float: center; 
    width: 450px; 
    margin: 25px auto 
}

#loginForm input { 
    background: url(../images/textinput-bg.png) repeat-x;
    border: 1px #ddd solid;
    padding: 10px; 
    width: 250px;  
    font-size: 12px; 
    color: #555; 
    font-family: arial, sans-serif; 
}

#loginForm fieldset {
    background: url(../images/textinput-bg.png) repeat-x; 
    border: 1px #ddd solid; 
    padding: 15px; 
    width: 250px;  
    font-size: 12px; 
    color: #555; 
    font-family: arial, sans-serif; 
}

#loginForm .submit, .save { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat;
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    margin: 0 0 0 0; 
}

#loginForm .submit:hover { 
    background: url(../images/red-button-bg.png) no-repeat;
    color: #fff; 
}


/* MESSAGES AND ERRORS */

.message {
    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 10px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}
div.errors ul {
    list-style: none;
    padding: 0;
}
div.errors li {
    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}
td.errors input {
    border: 1px solid red;
}




/* ------------ */
/* -- Login -- */
/* ------------ */

#create-edit-container { 
    float: left; 
    /*width: 450px; 
    margin: 25px auto 
    */
    margin: 25px auto 
}

#createEditForm input { 
    background: url(../images/textinput-bg.png) repeat-x;
    border: 1px #ddd solid;
    padding: 10px; 
    width: 250px;  
    font-size: 12px; 
    color: #555; 
    font-family: arial, sans-serif; 
    
}

#createEditForm label { 
    
 
}

#createEditForm fieldset {
    /*background: url(../images/textinput-bg.png) repeat-x; 
    border: 1px #ddd solid; 
    padding: 15px; 
    width: 250px;  
    font-size: 12px; 
    color: #555; 
    font-family: arial, sans-serif;  */
}

#createEditForm .submit { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat;
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    margin: 0 0 0 0; 
}

#createEditForm  .save { 
    display: block; 
    background: url(../images/blue-button-bg.png) no-repeat;
    width: 141px; 
    height: 34px; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    margin: 25px 0 0 0; 
    border: none; 
    cursor: pointer; 
    font-size: 14px; 
    margin: 0 0 0 0; 
}


#createEditForm  .save :hover { 
    background: url(../images/red-button-bg.png) no-repeat;
    color: #fff; 
}


#video-left-container { 
    float: left; 
    margin-top: 25px;
}

#video-right-container { 
    float: rigth; 
    margin-top: 25px;
}